<template>
	<view>
		<view class="top-box">
			<view class="userinfo-box u-flex">
				<u-avatar :src="userInfo.headiImgurl" size="104" class="u-m-r-24"></u-avatar>
				<view class="top-info">
					<view class="u-font-40 u-m-b-8 name-box">{{ userInfo.name }}</view>
					<view @click="show = true">
						<text class="u-m-r-16">{{ userInfo.userOrgs[0].companyName }}</text>
						<text>{{ userInfo.userOrgs[oIndex].orgName }}</text>
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
					<u-picker mode="selector" v-model="show" :range="userInfo.userOrgs" range-key="orgName" @confirm="checkOrgName"></u-picker>
				</view>
				<image src="../../static/images/qr_icon.png" mode="" class="qr" @click="qrCode"></image>
			</view>
		</view>
		<view class="menu-box">
			<!-- 培训经历隐藏 -->
			<navigator url="../trainingExperience/trainingExperience" hover-class="none" v-show="false">
				<view class="menu-item">
					<image src="../../static/images/pic_05.png" mode=""></image>
					<text>培训经历</text>
					<image src="../../static/images/forward.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="../appointment/appointment" hover-class="none">
				<view class="menu-item">
					<image src="../../static/images/pic_01.png" mode=""></image>
					<text>预约任务</text>
					<image src="../../static/images/forward.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="../administrators/administrators" hover-class="none">
				<view class="menu-item">
					<image src="../../static/images/pic_06.png" mode=""></image>
					<text>我是管理员</text>
					<image src="../../static/images/forward.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="../changePassword/changePassword" hover-class="none">
				<view class="menu-item">
					<image src="../../static/images/pic_07.png" mode=""></image>
					<text>修改密码</text>
					<image src="../../static/images/forward.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="../aboutUs/aboutUs" hover-class="none">
				<view class="menu-item">
					<image src="../../static/images/pic_04.png" mode=""></image>
					<text>关于我们</text>
					<image src="../../static/images/forward.png" mode=""></image>
				</view>
			</navigator>
		</view>
		<view class="btn-box">
			<u-button type="primary" plain :hair-line="false" hover-class="none" shape="circle" class="custom-style" @click="pickerShow = true">退出登录</u-button>
		</view>
		<u-modal v-model="pickerShow" title="" :content="content" :show-cancel-button="true" cancel-color="#2979ff" @confirm="loginOut"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			oIndex: null,
			pickerShow: false,
			show: false,
			content: '确认进行退出登录吗?',
			userInfo: {}
		};
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo');
	},
	onShow() {
		this.oIndex = this.userInfo.userOrgs.findIndex(v => v.orgId == uni.getStorageSync('department').orgId)
	},
	methods: {
		loginOut() {
			uni.reLaunch({
				url: '../login/login'
			});
		},
		qrCode() {
			uni.navigateTo({
				url: '../qrCode/qrCode'
			});
		},
		// 选择部门
		checkOrgName(e) {
			this.oIndex = e[0]
			uni.setStorageSync('department', this.userInfo.userOrgs[e[0]])
		}
	}
};
</script>

<style lang="scss" scoped>
.top-box {
	padding: 24upx;
	.userinfo-box {
		background-color: #ffffff;
		border-radius: 24upx;
		margin-bottom: 24upx;
		padding: 80upx 32upx;

		.top-info {
			font-size: 24upx;
			color: #828282;
			.name-box {
				font-weight: 500;
				color: #2b2b2b;
			}
			text {
				display: inline-block;
			}
		}
		.qr {
			width: 32upx;
			height: 32upx;
			margin-left: auto;
		}
	}
}
.menu-box {
	margin-bottom: 88upx;

	image {
		width: 40upx;
		height: 40upx;
	}
	// navigator {
	// 	.menu-item {
	// 		&:not(:last-child) {
	// 			border-bottom: none;
	// 		}
	// 	}
	// }
	.menu-item {
		display: flex;
		align-items: center;
		padding: 40upx;
		background-color: #ffffff;
		border-bottom: 2upx solid #f1f1f1;
		text {
			font-size: 32upx;
			color: #4b4b4b;
		}
		image {
			&:first-child {
				margin-right: 20upx;
			}
			&:last-child {
				padding-left: 30upx;
				margin-left: auto;
			}
		}
	}
}

.btn-box {
	padding: 32upx;
	.custom-style {
		border: none;
	}
}
</style>
